<template>
  <div class="notes-add">
    <div class="form-box">
      <div v-if="has()" class="inner-annotation-box">
        <span><span class="required-mark">*</span>批注变量:</span>
        <el-select size="mini" v-model="col" :clearable="true" placeholder="" value-key="variable">
          <el-option
            v-for="tableField in list"
            :key="tableField.variable"
            :label="tableField.variableName"
            :value="tableField"
          >
          </el-option>
        </el-select>
      </div>
      <div>
        <span><span class="required-mark">*</span>研究者批注:</span>
        <el-input :clearable="true" v-model="annotation" :size="size" placeholder="" />
      </div>
    </div>
    <div class="btn">
      <el-button type="primary" :disabled="has() ? !annotation || !col : !annotation" :size="size" @click="submit"
        >增加</el-button
      >
    </div>
  </div>
</template>

<script>
import { mapState, mapGetters, mapActions } from 'vuex'
export default {
  props: {
    size: {
      type: String,
      default: 'mini',
    },
    type: {
      type: String,
      require: true,
    },
    exParams: {
      type: Object,
    },
    tableStatus: {
      type: Object,
    },
  },
  data() {
    return {
      loading: null,
      col: null,
      annotation: '',
      list: []
    }
  },
  watch: {
    exParams:{
      handler: function (val) {
        if (val) {
          const list = val.tableFieldList&&val.tableFieldList.filter(item => item.variableName !== '序号')
          this.list = list
       }
      },
      deep: true,
      immediate: true,
    }
  },
  computed: {
    ...mapState({
      subjectInfo: state => state.treatment.subjectInfo,
      visit: state => state.treatment.visit,
      table: state => state.treatment.table,
    }),
    ...mapGetters({
      findRole: 'treatment/findRole',
    }),
  },
  methods: {
    ...mapActions('eCRFDetail', ['annotationSave']),
    has() {
      if (this.exParams) {
        return Reflect.has(this.exParams, 'tableFieldList')
      } else {
        return false
      }
    },
    // 提交
    submit() {
      if (this.exParams) {
        if (Reflect.has(this.exParams, 'tableFieldList')) {
          this.addNotes({
            tableField: this.col,
            detailsId: this.col.formFieldId,
            formId: this.col.formDataId,
            variableName: this.col.variableName,
            variableValue: this.col.variableValue,
          })
        } else {
          this.addNotes(this.exParams)
        }
      } else {
        this.addNotes(
          {
            detailsId: this.tableStatus.formDataId,
            variableName: '/',
            variableValue: '/',
          },
          () => {
            this.tableStatus.isNote = '2'
          }
        )
      }
    },
    addNotes(exParams, fn) {
      const userInfo = JSON.parse(localStorage.getItem('user-info'))
      const { detailsId, variableName, variableValue, formId } = exParams
      const { id } = this.subjectInfo
      let data = {
        subjectId: id,
        annotationType: this.type,
        handleName: userInfo.nickname,
        handleRole: localStorage.getItem('projectRoleCode'),
        content: this.annotation,
        detailsId,
        variableName,
        variableValue,
        formId
      }
      this.annotationSave({ data }).then(res => {
        const { code } = res
        if (code === 200) {
          fn && fn()
          exParams.tableField && (exParams.tableField.endorse = 1)
          this.$emit('close')
          this.$message.success('添加成功！')
        }
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.el-button--primary.is-disabled,
.el-button--primary.is-disabled:active,
.el-button--primary.is-disabled:focus,
.el-button--primary.is-disabled:hover {
  color: #fff;
  background-color: #85a2d9;
  border-color: #85a2d9;
}
.el-button--primary {
  color: #fff;
  background-color: #6b1685;
  border: 1px solid #dcdfe6;
  border-color: #6b1685;
}
.notes-add {
  .form-box {
    > div {
      width: 90%;
      display: flex;
      > span {
        font-size: 0.8rem;
        text-align: left;
        flex: 1;
      }
      > .el-input,
      .el-select {
        flex: 2;
      }
    }
    > .inner-annotation-box {
      margin-bottom: 1rem;
    }
  }
  .required-mark {
    color: #f56c6c;
  }
  .btn {
    text-align: right;
    position: relative;
    top: 0.8rem;
  }
}
</style>
